<template>
  <hips-view sub-header-fixed>
    <hips-nav-bar
      slot="header"
      title="Input 输入框"
      :back-button="{
        showLeftArrow: true,
      }"
      @nav-bar-back-click="$router.back()"
    />

    <hips-tabs
      slot="sub-header"
      v-model="active"
    >
      <hips-tab title="标准用法" />
      <hips-tab title="Dsx用法" />
    </hips-tabs>

    <div v-show="!active">
      <demo-block title="基础用法">
        <hips-input
          ref="firstInput"
          v-model="inputs.input0"
          placeholder="请输入姓名"
          show-clear-button
          type="text"
          input-align="right"
          @blur="handleOnBlur"
          @focus="handleOnFocus"
        />        
      </demo-block>

      <demo-block title="带标签">
        <hips-input
          v-model="inputs.input1"
          label="姓名"
          placeholder="请输入姓名"
          show-clear-button
          label-icon="mine-o"
          type="text"
          label-position="left"
        />        
      </demo-block>

      <demo-block title="在分组中使用">
        <hips-group>
          <hips-input
            v-model="inputs.input2"
            placeholder="请输入账号"
            show-clear-button
            label-icon="mine-o"
            type="text"
            label-position="left"
            input-align="left"
          />

          <hips-input
            v-model="inputs.input3"
            label="账号"
            placeholder="请输入账号"
            show-clear-button
            type="text"
            label-position="left"
            input-align="left"
          />

          <hips-input
            v-model="inputs.input4"
            label="密码"
            placeholder="请输入密码"
            show-eye
            show-clear-button
            type="password"
            label-position="left"
            input-align="left"
          />
          <hips-input
            v-model="inputs.input5"
            label="数字"
            placeholder="只能输入数字"
            show-clear-button
            type="number"
            label-position="left"
            input-align="left"
          />

          <form>
            <hips-input
              v-model="inputs.input6"
              label="搜索"
              placeholder="请输入搜索内容"
              show-clear-button
              show-search-button
              type="search"
              label-position="left"
              input-align="left"
              @search="handleSearch"
            />
          </form>

          <hips-input
            v-model="inputs.input7"
            label="带有按钮"
            placeholder="请输入"
            show-clear-button
            label-icon="mine-o"
            type="text"
            label-position="left"
            input-align="left"
          >
            <hips-button
              slot="right"
              class="button"
              size="small"
              type="primary"
              @click="handleButton"
            >
              发送验证码
            </hips-button>
          </hips-input>
        </hips-group>
      </demo-block>

      <demo-block title="禁用">
        <hips-input
          v-model="inputs.input8"
          placeholder="请输入姓名"
          label="姓名"
          show-clear-button
          disabled
          type="text"
          label-position="left"
        />        
      </demo-block>
      <demo-block title="必填">
        <hips-input
          v-model="inputs.input9"
          label="姓名"
          placeholder="请输入姓名"
          error-msg-require="必填"
          show-clear-button
          show-error-message
          required
          label-icon="mine-o"
          type="text"
          label-position="left"
        />
      </demo-block>

      <demo-block title="最大最小长度">
        <hips-input
          v-model="inputs.input15"
          label="姓名"
          placeholder="请输入6到10位内容"
          label-icon="mine-o"
          type="text"
          label-position="left"
          show-error-message
          max-length="10"
          min-length="6"
        />
      </demo-block>

      <demo-block title="图标插槽">
        <hips-input
          v-model="inputs.input11"
          label="姓名"
          placeholder="清空图标插槽"
          show-clear-button
          label-icon="mine-o"
          type="text"
          label-position="left"
        >
          <template slot="clear">
            Clear
          </template>
        </hips-input>
        <hips-input
          v-model="inputs.input12"
          label="姓名"
          placeholder="密码显示隐藏图标插槽"
          show-eye
          label-icon="mine-o"
          type="password"
          label-position="left"
        >
          <template slot="password-view">
            Show
          </template>
          <template slot="password-not-view">
            Hide
          </template>
        </hips-input>
        <hips-input
          v-model="inputs.input13"
          label="姓名"
          placeholder="搜索图标插槽"
          label-icon="mine-o"
          show-search-button
          type="search"
          label-position="left"
          @search="handleSearch1"
        >
          <template slot="search">
            Search
          </template>
        </hips-input>
      </demo-block>

      <demo-block title="延迟1000ms调用change回调">
        <hips-input
          v-model="inputs.input14"
          placeholder="请输入姓名"
          show-clear-button
          type="text"
          debounce="1000"
          @change="handleOnChange"
        />
      </demo-block>

      <demo-block title="标题在顶部">
        <hips-input
          v-model="inputs.input10"
          label="姓名"
          placeholder="请输入姓名"
          label-icon="mine-o"
          type="text"
          label-position="top"
        />
      </demo-block>
    </div>
    <div v-show="active">
      <demo-block title="基础用法">
        <hips-input
          :d-field="dsx.records.at(0).getField('input0')"
          placeholder="请输入内容"
        />        
      </demo-block>

      <demo-block title="带标签">
        <hips-input :d-field="dsx.records.at(0).getField('input1')" />
      </demo-block>

      <demo-block title="在分组中使用">
        <hips-group>
          <hips-input :d-field="dsx.records.at(0).getField('input2')" />

          <hips-input :d-field="dsx.records.at(0).getField('input3')" />

          <hips-input :d-field="dsx.records.at(0).getField('input4')" />

          <hips-input :d-field="dsx.records.at(0).getField('input5')" />

          <form>
            <hips-input :d-field="dsx.records.at(0).getField('input6')" />
          </form>

          <hips-input :d-field="dsx.records.at(0).getField('input7')">
            <hips-button
              slot="right"
              class="button"
              size="small"
              type="primary"
              @click="handleButton"
            >
              发送验证码
            </hips-button>
          </hips-input>
        </hips-group>
      </demo-block>

      <demo-block title="禁用">
        <hips-input :d-field="dsx.records.at(0).getField('input8')" />
      </demo-block>
      <demo-block title="必填">
        <hips-input :d-field="dsx.records.at(0).getField('input9')" />
      </demo-block>

      <demo-block title="最大最小长度">
        <hips-input :d-field="dsx.records.at(0).getField('input15')" />
      </demo-block>

      <demo-block title="图标插槽">
        <hips-input :d-field="dsx.records.at(0).getField('input11')">
          <template slot="clear">
            Clear
          </template>
        </hips-input>
        <hips-input :d-field="dsx.records.at(0).getField('input12')">
          <template slot="password-view">
            Show
          </template>
          <template slot="password-not-view">
            Hide
          </template>
        </hips-input>
        <hips-input :d-field="dsx.records.at(0).getField('input13')">
          <template slot="search">
            Search
          </template>
        </hips-input>
      </demo-block>

      <demo-block title="延迟1000ms调用change回调">
        <hips-input :d-field="dsx.records.at(0).getField('input14')" />
      </demo-block>

      <demo-block title="标题在顶部">
        <hips-input :d-field="dsx.records.at(0).getField('input10')" />
      </demo-block>
    </div>
  </hips-view>
</template>

<script>
import BasicView from '@/mixin/basic-view';

import { Input, Group, Button, Tabs, Tab } from '@hips/vue-ui';

import Dsx from '@hips/plugin-dataset-vuex';

export default {
  components: {
    [Input.name]: Input,
    [Group.name]: Group,
    [Button.name]: Button,
    [Tabs.name]: Tabs,
    [Tab.name]: Tab,
  },
  mixins: [ BasicView ],
  data() {
    const _this = this;
    return {
      active: 0,
      inputs: {
        input0: '',
        input1: '',
        input2: '',
        input3: '',
        input4: '',
        input5: '',
        input6: '',
        input7: '',
        input8: '',
        input9: '',
        input10: '',
        input11: '',
        input12: '',
        input13: '',
        input14: '',
        input15: '',
      },
      dsx: new Dsx({
        moduleName: 'dsx-input',
        autoCreate: true,
        fields: [
          {
            name: 'input0',
            showClearButton: true,
            type: 'text',
            inputAlign: 'right',
            emits: {
              blur() {
                _this.handleOnBlur();
              },
              focus() {
                _this.handleOnFocus();
              },
            },
          },
          {
            name: 'input1',
            label: '姓名',
            placeholder: '请输入姓名',
            showClearButton: true,
            labelIcon: 'mine-o',
            type: 'text',
            labelPosition: 'left',
          },
          {
            name: 'input2',
            placeholder: '请输入账号',
            showClearButton: true,
            labelIcon: 'mine-o',
            type: 'text',
            labelPosition: 'left',
            inputAlign: 'left',
          },
          {
            name: 'input3',
            label: '账号',
            placeholder: '请输入账号',
            showClearButton: true,
            type: 'text',
            labelPosition: 'left',
            inputAlign: 'left',
          },
          {
            name: 'input4',
            label: '密码',
            placeholder: '请输入密码',
            showEye: true,
            showClearButton: true,
            type: 'password',
            labelPosition: 'left',
            inputAlign: 'left',
          },
          {
            name: 'input5',
            label: '数字',
            placeholder: '只能输入数字',
            showClearButton: true,
            type: 'number',
            labelPosition: 'left',
            inputAlign: 'left',
          },
          {
            name: 'input6',
            label: '搜索',
            placeholder: '请输入搜索内容',
            showClearButton: true,
            showSearchButton: true,
            type: 'search',
            labelPosition: 'left',
            inputAlign: 'left',
            emits: {
              search() {
                _this.$hips.toast(
                  `search value = ${_this.dsx.records.at(0).get('input6')}`,
                );
              },
            },
          },
          {
            name: 'input7',
            label: '带有按钮',
            placeholder: '请输入',
            showClearButton: true,
            labelIcon: 'mine-o',
            type: 'text',
            labelPosition: 'left',
            inputAlign: 'left',
          },
          {
            name: 'input8',
            validateOn: 'blur',
            placeholder: '请输入姓名',
            label: '姓名',
            showClearButton: true,
            disabled: true,
            type: 'text',
            labelPosition: 'left',
          },
          {
            name: 'input9',
            label: '姓名',
            placeholder: '请输入姓名',
            showClearButton: true,
            required: true,
            labelIcon: 'mine-o',
            type: 'text',
            labelPosition: 'left',
            validateOn: 'blur',
            showErrorMessage: true,
            validationMessages: {
              required: '此项目必填',
            },
          },
          {
            name: 'input15',
            label: '姓名',
            placeholder: '请输入6到10位内容',
            labelIcon: 'mine-o',
            type: 'text',
            labelPosition: 'left',
            maxLength: '10',
            minLength: '6',
            validateOn: 'blur',
            showErrorMessage: true,
            validationMessages: {
              maxLength: '长度超过了10',
              minLength: '长度小于了6',
            },
          },
          {
            name: 'input11',
            label: '姓名',
            placeholder: '清空图标插槽',
            showClearButton: true,
            labelIcon: 'mine-o',
            type: 'text',
            labelPosition: 'left',
          },
          {
            name: 'input12',
            label: '姓名',
            placeholder: '密码显示隐藏图标插槽',
            showEye: true,
            labelIcon: 'mine-o',
            type: 'password',
            labelPosition: 'left',
          },
          {
            name: 'input13',
            label: '姓名',
            placeholder: '搜索图标插槽',
            labelIcon: 'mine-o',
            showSearchButton: true,
            type: 'search',
            labelPosition: 'left',
            emits: {
              search() {
                _this.$hips.toast(
                  `search value = ${_this.dsx.records.at(0).get('input13')}`,
                );
              },
            },
          },
          {
            name: 'input14',
            placeholder: '请输入姓名',
            showClearButton: true,
            type: 'text',
            debounce: 1000,
            emits: {
              change(val) {
                _this.handleOnChange(val);
              },
            },
          },
          {
            name: 'input10',
            label: '姓名',
            placeholder: '请输入姓名',
            labelIcon: 'mine-o',
            type: 'text',
            labelPosition: 'top',
          },
        ],
      }),
    };
  },
  mounted() {
    this.$refs.firstInput.focus();
  },
  methods: {
    handleOnBlur() {
      this.$hips.toast('handleOnBlur');
    },

    handleOnFocus() {
      this.$hips.toast('handleOnFocus');
    },

    handleButton() {
      this.$hips.toast('已发送');
    },

    handleSearch() {
      this.$hips.toast(`search value = ${this.inputs.input6}`);
    },
    handleSearch1() {
      this.$hips.toast(`search value = ${this.inputs.input13}`);
    },
    handleOnChange(val) {
      console.log('handleOnChange');
      this.$hips.toast(`call change delay 1000ms val = ${val}`);
    },
  },
};
</script>

<style scoped lang="stylus">
.button {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
  }
</style>
